<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单测试</title>
</head>

<body>
    <form action="">
        <div>
            <label for="">用户名</label>
            <input type="text" id="usrname">
        </div>
        <div>
            <label for="">邮箱</label>
            <input type="text" id="user-email">
        </div>
        <div>
            <label for="">昵称</label>
            <input type="text" id="nic">
        </div>
        <div>
            <label for="da">A</label>
            <input type="radio" id="da" value="a" name="se">
            <label for="db">B</label>
            <input type="radio" id="db" value="b" name="se">
        </div>

    </form>
    <script>
        const usernameEle = document.getElementById('usrname') 
        const user = {
            xingming: '王大锤',
            youxiang: '123@qq.com',
            nicheng: "大锤谷歌",
            radio:'a'
        }
        // const usernameSelector = '#usrname'
        // const usernameEle = document.querySelector(usernameSelector)
        // usernameEle.value = user.xingming

        // const emailSelector = "#user-email"
        // const emailEle = document.querySelector(emailSelector)
        // emailEle.value = user.youxiang

        // const fieldSelector = {
        //     email:"#user-email",
        //     username:"#usrname"
        // }
        // const fieldElement = {
        //     email:null,
        //     username:null,
        // }
        // for(let field in fieldSelector){
        //     const selector = fieldSelector[field]
        //     fieldElement[field] = document.querySelector(selector)
        // }
        // const fieldKey = {
        //     email:"youxiang",
        //     username:"xingming"
        // }
        // for(field in fieldElement){
        //     const elemnt = fieldElement[field]
        //     const valeKey = fieldKey[field]
        //     const value = user[valeKey]
        //     elemnt.value = value
        // }

        const formFieldOption = {
            username: {
                selector: "#usrname",
                valueKey: "xingming",
                element: null
            },
            email: {
                selector: "#user-email",
                valueKey: "youxiang",
                element: null
            },
            nickname: {
                selector: "#nic",
                valueKey: "nicheng",
                element: null
            },
            // select:{
            //     // select
            // }
        };
        //把元素挂载到对象formFieldOption上
        (function mountElementToFormFieldOption() {
            for (field in formFieldOption) {
                const fieldObj = formFieldOption[field]
                fieldObj.element = document.querySelector(fieldObj.selector)
            }
        })()
        //setFormValue
        for (field in formFieldOption) {
            const fieldObj = formFieldOption[field]
            const fieldKey = fieldObj.valueKey
            const filedValue = user[fieldKey]
            const fieldElement = fieldObj.element
            if(fieldElement.type == 'radio'){

            }
        }
        // const da = document.getElementById('da')
        // const db = document.getElementById('db')
        const radios = document.getElementsByName('se')
        function setRadio(value){
            radios.forEach(radio => {
                if(radio.value == value){
                    radio.checked = true
                }
                
            })
        }

    </script>
</body>

</html>